<template>
  <div ref="containerRef" class="detail">
    <div class="detail_header">
      <a-affix :target="(containerRef as HTMLElement)">
        <a-page-header title="版权查询" :back-icon="false" @back="onBack">
          <template #extra>
            <a-space>
              <a-button type="secondary" @click="onBack">
                <template #icon>
                  <icon-close/>
                </template>
                <template #default>取消</template>
              </a-button>
            </a-space>
          </template>
        </a-page-header>
      </a-affix>
    </div>
    <!--    具体的列表查询信息   -->
    <div class="detail_content" style="display: flex; flex-direction: column;">

      <GiTable
          row-key="id"
          :data="dataList"
          :columns="columns"
          :loading="loading"
          :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
          :pagination="pagination"
          :disabled-tools="['size']"
          :disabled-column-keys="['songName']"
          @refresh="search"
      >
        <template #toolbar-left>
          <a-input-search v-model="queryForm.songName" style="width: 250px;" placeholder="搜索歌曲名/词曲作者/演唱者" allow-clear @search="search"/>
<!--          <a-input-search v-model="queryForm.lyricist" placeholder="搜索词作者" allow-clear @search="search"/>-->
<!--          <a-input-search v-model="queryForm.composer" placeholder="搜索曲作者" allow-clear @search="search"/>-->
<!--          <a-input-search v-model="queryForm.singer" placeholder="搜索演唱者" allow-clear @search="search"/>-->
          <a-button @click="reset">
            <template #icon>
              <icon-refresh/>
            </template>
            <template #default>重置</template>
          </a-button>
        </template>

        <!-- 给单元格设置样式-->
        <template #songName="{ record }">
          <CellCopy :content="record.songName"/>
        </template>

        <template #lyricist="{ record }">
          <CellCopy :content="record.lyricist"/>
        </template>

        <template #composer="{ record }">
          <!--        <GiCellCopy :text="record.composer"/>-->
          <CellCopy :content="record.composer"/>
        </template>

        <template #singer="{ record }">
          <CellCopy :content="record.singer"/>
        </template>

        <template #lyricCopyrightCompany="{ record }">
          <a-typography-paragraph :ellipsis="{rows: 1,showTooltip: true,css: true}">
            {{ record.lyricCopyrightCompany }}
          </a-typography-paragraph>
        </template>

        <template #musicCopyrightCompany="{ record }">
          <a-typography-paragraph :ellipsis="{rows: 1,showTooltip: true,css: true}">
            {{ record.musicCopyrightCompany }}
          </a-typography-paragraph>
        </template>

        <!-- 操作部分-->
        <template #action="{ record }">
          <a-space>
            <a-link v-permission="['music:CopyrightUtils:get']" title="详情" @click="onDetail(record)">详情</a-link>
            <a-link v-permission="['music:CopyrightUtils:update']" title="修改" @click="onUpdate(record)">修改</a-link>
            <a-link
                v-permission="['music:CopyrightUtils:delete']"
                status="danger"
                :disabled="record.disabled"
                :title="record.disabled ? '不可删除' : '删除'"
                @click="onDelete(record)"
            >
              删除
            </a-link>
          </a-space>
        </template>
      </GiTable>

    </div>
  </div>
</template>

<script setup lang="ts">
import type {TableInstance} from '@arco-design/web-vue'
import {
  type CopyrightQuery,
  listCopyright
} from '@/apis/music/copyright'
import {useTable} from '@/hooks'
import {isMobile} from '@/utils'
import has from '@/utils/has'

const route = useRoute()
const router = useRouter()
const containerRef = ref<HTMLElement | null>()

const queryForm = reactive<CopyrightQuery>({
  songName: undefined,
  lyricist: undefined,
  composer: undefined,
  singer: undefined,
  lyricCopyrightCompany: undefined,
  musicCopyrightCompany: undefined,
  sort: ['songName,asc']
})

const {
  tableData: dataList,
  loading,
  pagination,
  search,
  handleDelete
} = useTable((page) => listCopyright({...queryForm, ...page}), {immediate: true})
const columns: TableInstance['columns'] = [
  {
    title: '序号',
    width: 90,
    align: 'center',
    render: ({rowIndex}) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
    fixed: !isMobile() ? 'left' : undefined,
  },
  {title: '歌曲名', dataIndex: 'songName', slotName: 'songName'},
  {title: '词作者', dataIndex: 'lyricist', slotName: 'lyricist'},
  {title: '曲作者', dataIndex: 'composer', slotName: 'composer'},
  {title: '演唱者', dataIndex: 'singer', slotName: 'singer'},
  {title: '词版权公司', dataIndex: 'lyricCopyrightCompany', slotName: 'lyricCopyrightCompany'},
  {title: '曲版权公司', dataIndex: 'musicCopyrightCompany', slotName: 'musicCopyrightCompany'},
  {
    title: '操作',
    dataIndex: 'action',
    slotName: 'action',
    width: 160,
    align: 'center',
    fixed: !isMobile() ? 'right' : undefined,
    show: has.hasPermOr(['music:CopyrightUtils:get', 'music:CopyrightUtils:update', 'music:CopyrightUtils:delete'])
  }
]

// 重置
const reset = () => {
  queryForm.songName = undefined
  queryForm.lyricist = undefined
  queryForm.composer = undefined
  queryForm.singer = undefined
  queryForm.lyricCopyrightCompany = undefined
  queryForm.musicCopyrightCompany = undefined
  search()
}

// 返回
const onBack = () => {
  router.back()
  tabsStore.closeCurrent(route.path)
}
</script>

<style scoped lang="less"></style>
